React = require('react')
Card = require('antd-mobile/lib/card')
Flex = require('antd-mobile/lib/flex')
Icon = require('antd-mobile/lib/icon')
Toast = require('antd-mobile/lib/toast')
RefreshControl = require('antd-mobile/lib/refresh-control')
{TextInput,View,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
{View} = require('react-native')
{fetchGetList,fetchRefreshList,fetchUpdate} = require('../actions/page_pilotInfo.js')
{connect} = require('react-redux')
Button = require('antd-mobile/lib/button')
List = require('antd-mobile/lib/list')
InputItem = require('antd-mobile/lib/input-item')
_ = require('underscore')
moment = require('moment')

backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')

basePage = require('../mixins/basePage.js')

class Page_PilotInfo extends React.Component
    # getInitialState:->
    #   showUpdatePage:false
    constructor:(props)->
      debugger
      super
      @state =
        showUpdatePage:false
        shr:props.pilotInfo.shr
        shdz:props.pilotInfo.shdz
        shdh:props.pilotInfo.shdh
    componentWillReceiveProps:(nextProps)->
      @setState
        shr:nextProps.pilotInfo.shr
        shdz:nextProps.pilotInfo.shdz
        shdh:nextProps.pilotInfo.shdh
    componentDidMount:->
        if @props.connected
          @props.fetchRefresh(@props.userInfo.token)

    renderHeader:->
      # model = @props.modelList[@props.id]?.model ? {}
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:3,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>个人信息</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
        </View>
      </View>

    switchHandle:->
      @setState showUpdatePage:true
    updateHandle:->
      debugger
      info =
        shr:@state.shr
        shdz:@state.shdz
        shdh:@state.shdh
      unless info.shr
        Toast.fail '请填写收货人'
        return
      unless info.shdz
        Toast.fail '请填写收货地址'
        return
      unless info.shdh
        Toast.fail '请填写联系电话'
        return
      @props.fetchInfoUpdate(info,@props.userInfo.token)
    renderBody:->
      debugger
      that = @
      model = @props.pilotInfo
      <ScrollView style={{backgroundColor:'#fffff0',height:height-80}}
        refreshControl={
          <RefreshControl refreshing={@props.refreshing} onRefresh={@props.fetchRefresh.bind(@,@props.id)}
              distanceToRefresh={60}
              resistance={2.5}
              hammerOptions={{
                touchAction:'auto'
                recognizers:
                  pan:
                    threshold:10
                }}/>
        }>
        {
          if @props.isLoading
            <View>
              <ActivityIndicator animating={@props.isLoading} size='large'/>
            </View>
        }
        <View style={[styles.card,{marginTop:10}]}>
          <View style={styles.row}>
            <View style={styles.cell}>
              {
                if that.state.showUpdatePage
                  [
                    <Text style={styles.text}>收货联系人</Text>
                    <TextInput onChangeText={(value)=>@setState({shr:value})} style={[styles.textContent,{marginTop:0,paddingTop:-5}]} value={@state.shr}/>

                  ]
                else
                  [<Text style={styles.text}>收货联系人</Text>
                  <Text style={styles.textContent}>{@state.shr}</Text>]
              }
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.cell}>
              {
                if that.state.showUpdatePage
                  [
                    <Text style={styles.text}>收货地址</Text>
                    <TextInput multiline={true} onChangeText={(value)=>@setState({shdz:value})} style={[styles.textContent,{marginTop:0,paddingTop:-5,height:50}]} value={@state.shdz} />
                  ]
                else
                  [<Text style={styles.text}>收货地址</Text>
                   <Text style={styles.textContent}>{@state.shdz}</Text>]
              }
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.cell}>
              {
                if that.state.showUpdatePage
                  [<Text style={styles.text}>联系电话</Text>
                  <TextInput onChangeText={(value)=>@setState({shdh:value})} style={[styles.textContent,{marginTop:0,paddingTop:-5}]} value={@state.shdh}/>]
                else
                  [<Text style={styles.text}>联系电话</Text>
                  <Text style={styles.textContent}>{@state.shdh}</Text>]
              }
            </View>
          </View>
        </View>
        {
          if that.state.showUpdatePage
            <View style={{margin:10}}>
              <Button type='primary' onClick={@updateHandle.bind(@)}>提交修改</Button>
            </View>
          else
            <View style={{margin:10}}>
              <Button type='primary' onClick={@switchHandle.bind(@)}>修改信息</Button>
            </View>
        }
      </ScrollView>
    render:->
      <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:20}>
        {
          @renderHeader()
        }
        {
          @renderBody()
        }
      </View>

  styles = StyleSheet.create
    card:
      borderRadius:10
      borderWidth:1
      borderStyle:'solid'
      borderColor:'#CCCCCC'
      flexDirection:'column'
      backgroundColor:'#ffffff'
      marginLeft:5
      marginRight:5
      marginBottom:10
    row:
      flexDirection:'row'
      borderBottomWidth:1
      borderStyle:'solid'
      borderBottomColor:'#CCCCCC'
      backgroundColor:'#ffffff'
      padding:10
      marginLeft:10
      marginRight:10
    lastRow:
      flexDirection:'row'
      padding:10
      marginLeft:10
      marginRight:10
      overflow:'visible'
    cell:
      flex:1
      flexDirection:'row'
    text:
      flex:1
    textContent:
      flex:3
      color:'black'

mapStateToProps = (state)->
  debugger
  pilotInfo:state.page_pilotInfo.pilotInfo
  isLoading:state.page_pilotInfo.isLoading
  completed:state.page_pilotInfo.completed
  refreshing:state.page_pilotInfo.refreshing
  lastFetchTime:state.page_pilotInfo.lastFetchTime
  connected:state.appState.connected
  userInfo:state.userInfo
mapDispatchToProps = (dispatch,wonProps)->
  fetchGet:(token)->
    dispatch fetchGetList(token)
  fetchRefresh:(token)->
    dispatch fetchRefreshList(token)
  fetchInfoUpdate:(info,token)->
    dispatch fetchUpdate(info,token)

module.exports = connect(mapStateToProps,mapDispatchToProps)(Page_PilotInfo)
